/*
 * @Description: 多辆车的弹窗
 * @Author: yingying.fan
 * @Date: 2019-05-20 17:56:41
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-28 18:29:13
 */
<template>
  <div
    class="bus-pop-wrapper"
    @click.self.stop="hide"
    v-show="isShowPop"
  >
    <div
      class="flex-v flex-vc route-bus-list-pop"
      :style="popStyleStr"
    >
      <bus
        v-for="(busItem, index) in busList"
        :key="`bus_${index}`"
        :showInPop="true"
        :busInfo="busItem"
        @click.native="clickBus(busItem)"
      ></bus>
    </div>
  </div>
</template>

<script>
import RouteLineBusItem from './RouteLineBusItem'
import { showBusInfoMask } from '../api/busPlugin.js'
export default {
  components: {
    'bus': RouteLineBusItem
  },
  props: {
    // 车辆信息列表
    busList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 样式的obj，单位均为px，需自己转换
    popStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      isShowPop: false,
      popStyleStr: ''
    }
  },
  methods: {
    reverse() {
      this.isShowPop = !this.isShowPop
    },
    show() {
      this.parsePopStyle()
      this.isShowPop = true
      // this.$nextTick(() => {
      //   this.$el.firstElementChild.scrollTop = 0
      // })
    },
    hide() {
      // 每次隐藏都将滑动到顶部
      this.$el.firstElementChild.scrollTop = 0
      this.isShowPop = false
    },
    parsePopStyle() {
      let styleStr = ''
      if (this.popStyle) {
        console.log('~~~popStyle', this.popStyle)
        for (var key in this.popStyle) {
          styleStr += key + ':' + (this.popStyle[key] / 75.0).toFixed(6) + 'rem;'
        }
      }
      this.popStyleStr = styleStr
      console.log('~~~popStyleStr', this.popStyleStr)
    },
    clickBus(busItem) {
      showBusInfoMask(this, busItem).then(() => {
        this.$EventBus.$emit('refreshDataWithoutPop')
      })
    }
  }
}
</script>

<style>
.bus-pop-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2);
}
.route-bus-list-pop {
  position: absolute;
  z-index: 15;
  width: 100px;
  max-height: 260px;
  padding: 15px 0;
  border-radius: 8px;
  background-color: #e8eced;
  overflow: auto;
}
.route-bus-list-pop > div {
  padding: 15px;
}
</style>
